<template>
  <div class="main">
    <div class="title">
      财务报表
    </div>
    <div>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="交易类型:">
          <el-select v-model="value" placeholder="全部">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
          <span class="total">累计充值: 198455元  累计收益:1375元</span>
        </el-form-item>
      </el-form>
      <div class="table">
        <el-table
          :data="tableData"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="order"
            label="订单号"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="time"
            label="交易时间"

            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="explain"
            label="交易说明"
            header-align="center"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="money"
            label="交易金额"
            width="150"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="media"
            label="交易媒体"
            width="180"
            header-align="center"
            align="center">
          </el-table-column>
          <el-table-column
            prop="state"
            label="交易状态"
            width="150"
            header-align="center"
            align="center">
          </el-table-column>
        </el-table>
      </div>
      <el-pagination
        background
        layout="prev, pager, next,total"
        :total="1000">
      </el-pagination>
    </div>
  </div>

</template>

<script>
export default {
  data() {
    return {
      options: [{
        value: '选项1',
        label: '充值'
      }, {
        value: '选项2',
        label: '消费'
      }, {
        value: '选项3',
        label: '收益'
      }, {
        value: '选项4',
        label: '其他'
      }],
      value: '',
      tableData: [{
        order: '6032406992019082022352513',
        time: '2019-08-21 09:28:57',
        explain: '订单拒稿退款',
        money: '+4.00',
        media: '北京财经网',
        state: '成功'
      }, {
        order: '6032406992019082022352513',
        time: '2019-08-21 09:28:57',
        explain: '订单拒稿退款',
        money: '+4.00',
        media: '北京财经网',
        state: '成功'
      },
      {
        order: '6032406992019082022352513',
        time: '2019-08-21 09:28:57',
        explain: '订单拒稿退款',
        money: '+4.00',
        media: '北京财经网',
        state: '成功'
      },
      {
        order: '6032406992019082022352513',
        time: '2019-08-21 09:28:57',
        explain: '订单拒稿退款',
        money: '+4.00',
        media: '北京财经网',
        state: '成功'
      }]
    }
  }
}
</script>

<style lang="scss" scoped>
.main{
  min-height: 755px;
}
.title {
    color: #F37B1D;
    font-weight: 700;
    padding-bottom: 16px;
    font-size: 18px;
    border-bottom: 1px #dedede solid;
}
.total{
  margin-left: 38px;
    color: #606266;
}
.el-form{
  margin-top: 28px;
  margin-left: 26px;
}
.table{
  margin-bottom: 35px;
}
</style>
